<template>
	<view class="wrapper">
		<view class="top">
			<view class="top-title">可提现金额（元）</view>
			<view class="top-amount">
				<u-input type="digit" v-model="amount" placeholder="0.00" placeholderClass="placeholderStyle" border="none" fontSize="60rpx" color="#000"></u-input>
			</view>
			<view class="top-line" />
			<view class="top-text">
				最多提现¥{{ withdrawableAmount }}，
				<text @click="withdrawAll">全部提现</text>
			</view>
			<view class="top-account" v-if="type === 'rentWithdrawal'" @click="bankCardsPopupOpen">
				<view class="top-account-left">提现至</view>
				<view class="top-account-right">
					<span v-if="accounInfo.account">{{ accounInfo.account }}/{{ accounInfo.bank_name }}</span>
					<span v-else>选择提现账户</span>
					<u-icon name="arrow-right" color="#333333" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="top-account top-account_" v-if="type === 'commission'">
				<view class="top-account-left">提现至支付宝账户</view>
				<view class="top-account_-inputBox">
					<u-input
						placeholder="请输入支付宝账户名称"
						border="none"
						placeholderClass="placeholderCodeClass"
						color="#333"
						fontSize="26rpx"
						v-model="accounInfo.name"
					></u-input>
				</view>
				<view class="top-account_-inputBox">
					<u-input
						placeholder="请输入支付宝账户"
						border="none"
						placeholderClass="placeholderCodeClass"
						color="#333"
						fontSize="26rpx"
						v-model="accounInfo.account"
					></u-input>
				</view>
			</view>
			<!-- 			<view class="top-phone">18547852365</view>
			<view class="top-code">
				<u-input placeholder="请输入短信验证码" border="none" placeholderClass="placeholderCodeClass" color="#333" fontSize="26rpx" v-model="code">
					<view class="suffix" slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
						<u-text @tap="getCode" :text="tips" color="#FF4603" size="26rpx"></u-text>
					</view>
				</u-input>
			</view> -->
			<view class="top-btn" @click="$u.debounce(handleWithdraw, 600)">确认提现</view>
		</view>
		<view class="main">
			<view class="main-title">提现记录</view>
			<view class="main-content">
				<p>1. 提现申请提交后24-48小时内审核到账，周末正常受理；若 遇周末系统维护，将顺延至首个工作日处理，到账以银行为准。</p>
				<p>2. 国家法定节假日期间，因银行及支付渠道限制，提现处理顺 延至节后工作日，请关注公司假期公告。</p>
				<p>3. 若因银行/支付渠道限额、系统维护升级等，提现将延后至 恢复正常后处理。</p>
				<p>
					4. 如有其他疑问，可联系
					<text style="color: #ff4603">“在线客服”</text>
					咨询获取帮助。
				</p>
			</view>
		</view>
		<u-popup :show="bankCardsShow" closeable @close="bankCardsPopupClose" @open="bankCardsPopupOpen">
			<view class="bank-list">
				<!-- 银行卡列表 -->
				<view class="bank-card" v-for="(card, index) in bankCards" :key="card.id" @click="handleSelectCard(card)">
					<view class="bank-icon">
						<text class="bank-short-name">{{ getBankShortName(card.bank_name) }}</text>
					</view>
					<view class="bank-info">
						<view class="bank-name">{{ card.bank_name }}卡({{ card.bank_card.slice(-4) }})</view>
						<view class="add-time">
							{{ card.createtime }}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { purse } from '@/api';
import { bankCard } from '@/api';
export default {
	data() {
		return {
			bankCardsShow: false,
			type: null, //区分租金提现还是佣金提现  commission佣金  rentWithdrawal租金
			withdrawableAmount: 0, //可提现的总金额
			amount: '', //金额
			// 账户信息
			accounInfo: {
				name: '', //姓名
				bank_name: '', //开户行
				account: '' //账号
			},
			bankCards: []
			// tips: '',
			// seconds: 60,
			// code: '',
		};
	},
	async onLoad(options) {
		this.type = options.type;
		await this.getWithdrawableAmount();
		this.getBankCardsList();
	},
	methods: {
		handleSelectCard(item) {
			this.accounInfo.name = item.name;
			this.accounInfo.bank_name = item.bank_name;
			this.accounInfo.account = item.bank_card;
			console.log(this.accounInfo);
			this.bankCardsPopupClose();
		},
		getBankShortName(name) {
			if (!name) return '';
			return name.length > 2 ? name.substring(0, 1) : name;
		},
		bankCardsPopupClose() {
			this.bankCardsShow = false;
		},
		bankCardsPopupOpen() {
			this.bankCardsShow = true;
		},
		async getBankCardsList() {
			const res = await bankCard.bankList();
			this.bankCards = res.data || [];
		},
		async handleWithdraw() {
			if (!this.amount) {
				uni.showToast({
					icon: 'none',
					title: '请输入提现金额'
				});
				return;
			}
			if (Number(this.amount) <= 0) {
				uni.showToast({
					icon: 'none',
					title: '提现金额不能为0'
				});
				return;
			}
			if (Number(this.amount) > Number(this.withdrawableAmount)) {
				uni.showToast({
					icon: 'none',
					title: '超出最大提现金额'
				});
				return;
			}
			let res;
			if (this.type === 'rentWithdrawal') {
				if (!this.accounInfo.name || !this.accounInfo.bank_name || !this.accounInfo.account) {
					uni.showToast({
						icon: 'none',
						title: '请先选择提现账户'
					});
					return;
				}
				res = await purse.rentWithdrawal({
					amount: this.amount,
					...this.accounInfo,
					type: 1
				});
			}
			if (this.type === 'commission') {
				if (!this.accounInfo.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入支付宝账户名称'
					});
					return;
				}
				if (!this.accounInfo.account) {
					uni.showToast({
						icon: 'none',
						title: '请输入支付宝账户'
					});
					return;
				}
				res = await purse.commissionWithdrawal({
					amount: this.amount,
					...this.accounInfo,
					type: 2
				});
			}
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1200);
		},
		// 全部提现
		withdrawAll() {
			this.amount = this.withdrawableAmount;
		},
		// 获取可提现的总金额
		async getWithdrawableAmount() {
			if (this.type === 'rentWithdrawal') {
				const res = await purse.rentWallet();
				this.withdrawableAmount = res.data.rent_balance || 0;
			}
			if (this.type === 'commission') {
				const res = await purse.commissionWallet();
				this.withdrawableAmount = res.data.commission_balance || 0;
			}
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			uni.$u.toast('倒计时结束');
		},
		start() {
			uni.$u.toast('倒计时开始');
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 30rpx;
}
.top {
	padding: 30rpx;
	background: #ffffff;
	border-radius: 14rpx;
	&-title {
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 70rpx;
	}
	::v-deep .placeholderStyle {
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 60rpx;
		color: #d9d7d7;
	}
	::v-deep .u-input__content__field-wrapper__field {
		height: auto;
		line-height: normal;
	}
	&-line {
		height: 2rpx;
		background: #f5f5f5;
		border-radius: 1rpx;
		margin: 20rpx 0;
		// opacity: 0.6;
	}
	&-text {
		font-family: 'PingFang SC';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text {
			color: #ff4603;
		}
	}
	&-account {
		margin-top: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-left {
			font-family: 'PingFang SC';
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
		}
		&-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-family: 'PingFang SC';
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
	}
	&-account_ {
		display: block;
		margin-top: 50rpx;
		&-inputBox {
			margin-top: 40rpx;
		}
	}
	&-phone {
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		margin: 43rpx 0;
		::v-deep .placeholderCodeClass {
			font-family: ' PingFang SC';
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
		}
	}
	&-btn {
		width: 580rpx;
		height: 89rpx;
		background: #ff4400;
		border-radius: 44rpx 44rpx 45rpx 45rpx;
		margin: 60rpx auto 10rpx auto;
		line-height: 89rpx;
		text-align: center;
		font-family: 'PingFang SC';
		font-weight: bold;
		font-size: 30rpx;
		color: #ffffff;
	}
}
.main {
	margin-top: 20rpx;
	background: #ffffff;
	border-radius: 14rpx;
	padding: 30rpx 0rpx 100rpx 0rpx;
	&-title {
		padding: 0 30rpx;
		font-family: 'PingFang SC';
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}
	&-content {
		padding: 0 20rpx 20rpx;
		font-family: 'Source Han Sans CN';
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		p {
			padding: 20rpx 0;
		}
	}
}

.bank-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 20rpx 0;
}

.bank-card,
.add-card {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 14rpx;
	padding: 40rpx 38rpx;
}

.bank-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background-color: #ff5a5f;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 30rpx;

	.bank-short-name {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.bank-info {
	flex: 1;

	.bank-name {
		font-weight: 500;
		font-size: 30rpx;
		color: #2c2e2e;
		margin-bottom: 24rpx;
	}

	.add-time {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
}
</style>
